<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <h3 >如何把数据从子组件传给父组件</h3>
        <my-com1 @abc="hAbc"></my-com1>
    </div>
    <script src="./vue.js"></script>

    <script>
        // 目标： 如何把数据从子组件传给父组件
        // 步骤
        //    1. 在使用子组件时，添加对自定义事件的监听
        //        <my-com1 @事件名1="处理函数1"  @事件名2="处理函数2"></my-com1>
        //       - 自定义事件：不是系统提供的事件
        //       - 处理函数1:定义在父组件中
        //    2. 在子组件中，触发事件，传递参数
        //       this.$emit('事件名1'，参数)

        const vm = new Vue({
            el: '#app',
            components: {
                MyCom1: {
                    template: `
                        <div>
                            <h2>子组件</h2>
                            <button @click="h1">发abc事件</button>
                        </div>`,
                    methods: {
                        h1 () {
                            // $emit 是vue提供的方法，用来向父组件抛出事件
                            this.$emit('abc',{a:1,b:2})
                        }
                    }
                }
            },
            methods: {
                hAbc (obj) {
                    console.log('收到了事件abc，参数是',obj)
                }
            }
        })
    </script>
</body>
</html>